<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box{
        width: 400px;
        height: 350px;
        background-color: #607D8B;
        margin:100px;
        position: relative;
    }
    .head{
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background-color: #DE5D35;
        position: absolute;
        right:90px;
        bottom: 90px;
    }
    .eyes{
        position: absolute;
        top:40px;
        left:10px;
    }
    .eyes div{
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: #000;
        margin-left:10px;
        border-radius: 50%;
        position: relative;
        
    }
    .left span{
        position: absolute;
        top:-7px;
        left:-5px;
        width: 20px;
        height: 5px;
        background-color: #DE7C58;
        border-radius: 5px;
        transform: rotateZ(15deg);
    }
    .right span{
        position: absolute;
        top:-7px;
        left:-5px;
        width: 20px;
        height: 5px;
        background-color: #DE7C58;
        border-radius: 5px;
        transform: rotateZ(-15deg);
    }
    .light{
        position: absolute;
        width: 45px;
        height: 30px;
        border-radius: 50%;
        background-color: #E4845D;
        top:20px;
        right:10px;
        transform: rotateZ(45deg);
    }
    .light1{
        position: absolute;
        top:4px;
        left:4px;
        width: 30px;
        height: 20px;
        border-radius: 50%;
        background-color: #E7916C;
    }
    .light2{
        position: absolute;
        width: 17px;
        height: 15px;
        top:2px;
        left:2px;
        border-radius: 50%;
        background-color: #E9AA8C;
    }
    .leaf{
        width: 50px;
        height: 2px;
        border-radius: 50%;
        position: absolute;
        top:-25px;
        left:30px;
        background-color: #69453E;
        transform: rotateZ(105deg);
    }
    .green{
        position: absolute;
        left:-28px;
        top:-60px;
        width: 80px;
        height: 40px;
        background-color: #789336;
        border-radius: 50% 0px 50% 0px;
        transform: rotateZ(90deg);

    }
    .shadai{
        width: 59px;
        height: 170px;
        position: absolute;
        top:73px;
        left:100px;
        background-color: #9B3C43;
        border-radius: 5px;
    }
    .one{
        width: 2px;
        height: 73px;
        background-color: #000;
        position: absolute;
        top:-72px;
        left:15px;
        transform: rotateZ(4deg);

    }
    .two{
        width: 2px;
        height: 73px;
        background-color: #000;
        position: absolute;
        top:-72px;
        left:25px;
        transform: rotateZ(0deg);

    }
    .three{
        width: 2px;
        height: 73px;
        background-color: #000;
        position: absolute;
        top:-72px;
        left:35px;
        transform: rotateZ(-4deg);

    }
    .center{
        position: absolute;
        top:50px;
        left:0;
        width: 59px;
        height: 62px;
        background-color: #361115;
    }
    .white{
        position: absolute;
        top:10px;
        left:35px;
        width: 13px;
        height: 150px;
        background-color: #C48A8D;
        border-radius: 3px;
        opacity: 0.8;
    }
    .quantou1{
        position: absolute;
        transform: rotateZ(90deg);
        top:52px;
        left:-25px;

    }
    .q11{
        width: 2px;
        height: 10px;
        background-color: #400E0D;
        border-radius: 2px;
        margin-left:6px;

    }
    .q12{
        width: 15px;
        height: 5px;
        border-radius: 5px;
        background-color: #99211F;
    }
    .q13{
        width: 15px;
        height: 15px;
        margin-right: 5px;
        border-radius: 50%;
        background-color: #821814;
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="head">
                <div class="eyes">
                        <div class="left">
                            <span></span>
                        </div>
                        <div class="right">
                            <span></span>
                        </div>
                
                    </div>
                <div class="light">
                    <div class="light1">
                        <div class="light2">

                        </div>

                    </div>

                </div>
                <div class="leaf">
                    <div class="green">

                    </div>

                </div>
                <div class="quantou1">
                    <div class="q11"></div>
                    <div class="q12"></div>
                    <div class="q13"></div>

                </div>
        </div>
       <div class="shadai">
           <div class="one"></div>
           <div class="two"></div>
           <div class="three"></div>
           <div class="center">

           </div>
           <div class="white">

           </div>

       </div>

    </div>
</body>
</html>